<template>
	<view class="box">
		<view style="height: 100rpx;">
			<view class="serchBox plr30 ptb20 flex">
				<u-search placeholder="输入关键字搜索" v-model="keyword" shape="square" :showAction="false"
					style="width: calc(100% - 170rpx)"></u-search>
				<view class="btn" @click="handleSerch">搜索</view>
			</view>
		</view>
		<view style="height: 100rpx">
			<view class="tabsBox">
				<u-tabs :list="tabsList" @click="realTimeTabs" :scrollable="false" lineWidth="72rpx"></u-tabs>
			</view>
		</view>
        
		<outside-company :tabsindex="tabsindex" @itemDetails="itemDetails" @iconAdd="iconAdd"></outside-company>
	</view>
</template>

<script>
	import outsideCompany from './components/outsideCompany.vue'
	export default {
		components: {
			outsideCompany
		},
		data() {
			return {
				keyword: '',
				//tab栏下标
				tabsindex: 0,
				//tab栏
				tabsList: [{
					name: '外包企业准入(223)',
				}, {
					name: '外包人员准入(222)',
				}],
			}
		},
		methods: {
			//实时告警tab栏切换
			realTimeTabs(e) {
				this.tabsindex = e.index
			},
			handleSerch() {
				console.log('点击了搜索按钮')
			},
			// 新增按钮
			iconAdd(index) {
				if(index == 0) {
					console.log('外包企业新增')
					uni.navigateTo({
						url:'./addOutsourcingFirms/addOutsourcingFirms'
					})
				}else {
					console.log('外包人员新增')
					uni.navigateTo({
						url:'./addOutsourcingPersonnel/addOutsourcingPersonnel'
					})
				}
			},
			// 详情页面点击
			itemDetails(val,index) {
			  if(index == 0) {
				  console.log('跳转外包企业')
				  uni.navigateTo({
				  	url:'./outsourcingFirms/outsourcingFirms'
				  })
				  
			  }else {
				  console.log('跳转外包人员')
				  uni.navigateTo({
				  	url:'./outsourcingPeople/outsourcingPeople'
				  })
			  }
			}
		}
	}
</script>

<style>
	.box {
		height: 100vh;
		overflow: auto;
		background-color: #F1F2F5;
		position: relative;
	}

	.serchBox {
		box-sizing: border-box;
		background-color: #fff;
		height: 100rpx;
		position: fixed;
		width: 100%;
		z-index: 520;
	}

	.tabsBox {
		box-sizing: border-box;
		height: 100rpx;
		position: fixed;
		width: 100%;
		background-color: #FFFFFF;
		z-index: 520;
	}

	>>>.u-tabs__wrapper__nav__item {
		padding: 0 15rpx !important;
	}

	>>>.u-tabs__wrapper__nav__item__text {
		font-size: 30rpx !important
	}

	>>>.u-badge--not-dot {
		padding: 4rpx 8rpx;
	}

	/* >>>.u-search__action--active {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		border-radius: 6px;
		background-color: #3473F9;
		color: #fff;
	} */
	.btn {
		width: 140rpx;
		height: 68rpx;
		line-height: 68rpx;
		border-radius: 6px;
		background-color: #3473F9;
		color: #fff;
		text-align: center;
		margin: -4rpx 0 0 20rpx;
		font-size: 28rpx;
	}


</style>
